<template>
  <div>
    <div class="header">
      <van-image round width="2rem" height="2rem" src="https://yanxuan.nosdn.127.net/8945ae63d940cc42406c3f67019c5cb6.png" class="pic" />
      <div class="user">
        <div class="name">{{ username }}</div>
        <div class="type">{{ usertype }}</div>
      </div>
      <div class="right">
        <van-image width="1rem" height="1rem" src="https://picx.zhimg.com/80/v2-d29b8815278daf2fba329612b052fc7a_720w.png" class="img" />
        <div class="word">
          <van-icon name="vip-card" class="line1">Pro会员</van-icon>
          <div class="line2">立即开通</div>
        </div>
      </div>
    </div>
    <div class="my">我的资产</div>
    <van-grid square :border="false" :column-num="5" style="border-bottom: 0.2rem solid #f4f4f4">
      <van-grid-item class="item">
        <van-badge dot><p class="num">¥0</p></van-badge>
        <div class="text">余额</div>
      </van-grid-item>
      <van-grid-item class="item">
        <van-badge dot><p class="num">0</p></van-badge>
        <div class="text">红包</div>
      </van-grid-item>
      <van-grid-item class="item">
        <van-badge><p class="num">0</p></van-badge>
        <div class="text">优惠券</div>
      </van-grid-item>
      <van-grid-item class="item">
        <van-badge><p class="num">0</p></van-badge>
        <div class="text">积分</div>
      </van-grid-item>
      <van-grid-item class="item">
        <van-badge><p class="num">0</p></van-badge>
        <div class="text">礼品卡</div>
      </van-grid-item>
    </van-grid>
    <van-grid :column-num="3" style="border-bottom: 0.4rem solid #f4f4f4">
      <van-grid-item icon="notes-o" text="我的订单" />
      <van-grid-item icon="manager-o" text="账号管理" />
      <van-grid-item icon="phone-o" text="我的手机号" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
      <van-grid-item icon="records" text="意见反馈" />
    </van-grid>
    <div class="out" @click="goOut">退出登录</div>
  </div>
</template>
<script>
import { Icon, Grid, GridItem, Badge, Dialog } from "vant";
import { mapState } from "vuex";
export default {
  // 组件名字
  name: "Center",
  components: {
    [Icon.name]: Icon,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Badge.name]: Badge,
    [Dialog.Component.name]: Dialog.Component,
  },
  // 状态数据
  data() {
    return {
      username: "用户13131",
      usertype: "普通用户",
    };
  },
  mounted() {
    console.log("123");
    this.getUserInfo();
  },
  methods: {
    // 退出登录
    goOut() {
      Dialog.confirm({
        title: "退出登录?",
      })
        .then(async () => {
          await this.$store.dispatch("user/logout");
          this.$router.push({ path: "/home" });
        })
        .catch(() => {
          console.log("取消退出登录");
        });
    },
    // 获取用户信息
    async getUserInfo() {
      try {
        await this.$store.dispatch("user/userInfo");
        this.username = this.nickName;
      } catch (error) {
        console.log("出错了");
      }
    },
  },
  computed: {
    ...mapState({
      nickName: (state) => state.user.nickName,
    }),
  },
};
</script>
<style lang="less" scoped>
.header {
  height: 3.6rem;
  width: 10rem;
  background-image: url(https://yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
  display: flex;
  //   flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  .pic {
    margin-left: 0.4rem;
  }
  .user {
    flex: 1;
    margin-left: 0.4rem;
    .name {
      font-size: 0.48rem;
    }
    .type {
      font-size: 0.3733rem;
    }
  }
  .right {
    font-size: 0.16rem;
    color: #f9e0c0;

    .img {
      margin-left: 0.8rem;
    }
    .word {
      width: 2.4rem;
      height: 1.12rem;
      border-radius: 1.12rem 0 0 1.12rem;
      background-color: #463f37;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
.my {
  font-size: 0.4267rem;
  height: 1.408rem;
  line-height: 1.408rem;
  margin-left: 0.4rem;
  border-bottom: 1px solid #d9d9d9;
}
.item {
  font-size: 0.32rem;
  .num {
    font-weight: bold;
    font-size: 0.4rem;
  }
}
.out {
  width: 100%;
  height: 1.28rem;
  line-height: 1.28rem;
  font-size: 0.42rem;
  text-align: center;
  border-bottom: 0.2rem solid #f4f4f4;
}
</style>
